iT邦幫忙

2026 iThome 鐵人賽

DAY 18
0

這次來介紹工具型別(Utility Types),工具型別是 TypeScript(TS)內建的型別工具,可以根據現有型別產生新的型別,不需要重新把整個型別定義一次。

這次會分成 2 天的形式來介紹工具型別,今天先談談這三個:

  • Partial<T>
  • Required<T>
  • Readonly<T>

1. Partial<T>

Partial<T> 能夠將 <T> 內的所有屬性改為可選屬性,常在更新部分資料時使用。

interface Student {
	name: string;
	age: number;
	major: string;
}

function studentUpdate(studentId: number, data: Partial<Student>) {
	console.log(data);
}

// 使用 Partial<T> 後,原本的 Student 介面會變成全部都是可選屬性:
// interface Student {
// 	name?: string;
// 	age?: number;
// 	major?: string;
// }

// 能夠只提供部分的資訊,多個屬性也可以一起提供
studentUpdate(12345, { name: "Wendy" });
studentUpdate(67890, { age: 22, major: "資管系" });

因為所有屬性都變成可選,所以在更新資料時,可以只提供需要修改的部分,也可以同時提供多個屬性。


2. Required<T>

Required<T>Partial<T> 相反,前者會將屬性改為必須存在(必填),後者改為可選。

interface Student {
	name?: string;
	age?: number;
	major?: string;
}

type StudentRequired = Required<Student>;

// StudentRequired 會變成這樣:
// {
// 	name: string;
// 	age: number;
// 	major: string;
// }

大家可能會想說,為什麼不一開始就將介面設定成必填屬性?還要這樣多此一舉,不是很奇怪嗎?

Required<T> 通常會用在原本允許部分屬性缺少,但經過處理後需要所有資料都存在的情況。

例如在程式中先補齊預設值,之後就可以使用 Required<T> 表示這份資料的所有屬性都已經存在,讓 TypeScript 在型別檢查時要求完整的資料。


3. Readonly<T>

看到我們熟悉的 readonly,就知道這個型別是做什麼的。Readonly<T> 會把 <T> 裡面的屬性變成唯讀,之後不能重新賦值。

interface Student {
	name: string;
	age: number;
	major: string;
}

const studentInfo: Readonly<Student> = {
	name: "Ivan",
	age: 24,
	major: "音樂系"
};

// 唯讀狀態能夠正常讀取:
console.log(studentInfo.name);
console.log(studentInfo.age);

// 不能重新賦值:
studentInfo.major = "美術系"; // ❌ 不合法

如果希望建立後的物件屬性不再被重新賦值,就能夠使用 Readonly<T>

需要注意的是,Readonly<T> 主要限制第一層屬性的重新賦值,並不代表物件內部所有巢狀屬性都會變成唯讀。


小結

今天介紹了三個常見的工具型別,做個表格統整一下給大家參考:

工具型別 功能 原本狀態 更改後
Partial<T> 全部屬性變成可選 必填 可選
Required<T> 全部屬性變成必填 可選 必填
Readonly<T> 全部屬性變成唯讀 可修改 不可重新賦值

今天的內容就到這邊,明天會接續這篇,繼續介紹工具型別喔!


上一篇
[Day-17] 泛型:條件約束
下一篇
[Day-19]Utility Types-2
系列文
從零開始學習TypeScript:菜鳥的入門介紹與概覽22
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言